<template>
	<div class="page" data-page="moreFireSys" style="z-index: 2;">
		<div class="navbar">
	      <div class="navbar-inner">
	        <div class="left">
	            <a href="#" class="link back" @click="$root.backToTab()">
	              <i class="icon icon-back"></i>
	              <span class="ios-only">Back</span>
	            </a>
	        </div>
	        <div class="title sliding" style="left: -25px;">消防系统详情</div>
	      </div>
	    </div>
	    <div class="page-content">
			<div class="list accordion-list fire-sys-list" style="margin: 0px;">
				<ul></ul>
			</div>
		</div>
	</div>
</template>
<style scoped>
	.my-icon{
		font-size: 12px;
	}
	.fireSys-card-top{
		height: 50px;
	}
	.fireSys-card-title{
		font-size: 15px;
		font-weight: bold;
	}
	.all-fireSys-num{
		color: #868686;
		font-size: 12px;
		margin-left: 8px;
	}
	.all-fireSys-num span{
		color: #3d3d3d;
	}
	.fireSys-card-top-right{

	}
	.fire-sys-list .item-inner, .fire-sys-list .row{
		width: 100%;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.fireSystem-name{
		height: 18px;
		font-size: 14px;
	}
	.fireSystem-num{
		font-size: 12px;
		margin-top: 5px;
		color: #868686;
	}
	.fireSystem-num-cont{
		float: left;
		margin-right: 12px;
	}
	.fireSystem-list img{
		border-radius: 30px;
	}
	.fire-sys-list ul:before{ 
		width:0px !important;
	}
	.fireSystem-list-row{
		height: 35px;
		line-height: 35px;
		color: #666666;
	}
	.fireSystem-list-row .col-33{
		float: left;
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fireSystem-list-row .col-66{
		float: right;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fireSystem-list-row .col-66 div{
		width: 65px;
		height: 22px;
		line-height: 22px;
		border-radius: 2px;
		background-color: #e1e1e1;
		font-size: 12px;
		display: inline-block;
		text-align: center;
	}
	.fire-system-nodeList{
		margin-top: 5px !important;
	}
	.fireSystem-list .item-media{
		padding-top: 5px;
	}
</style>
<script>
	return {
		beforeCreate() {
			var self = this;
			common.loading(1);
			self.getBuildData();
		},
		methods: {
			getBuildData:function(){
				var self = this;
				var $ = self.$$;
                var id_org="";
                if (single_Orgid == "") {id_org=userInfor.organizationIds;}else {id_org=single_Orgid;}
                Dao.getFireSysData({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    organizationId: id_org,
                    type:1,
                },function(data){
					if(data){
       					$(".fire-sys-list ul").empty();
       					$("#fireSystem").html(data.length);
       					var detectorNum=0;
       					for(var i=0;i < data.length; i++){
       						detectorNum=detectorNum+data[i].facsTotal*1;
       					}
       					$("#detector").html(detectorNum);
       					if(data && data.length>0){
       						for(var i=0;i < data.length; i++){
       							var url = data[i].systemUrl;
       							if(!url){
       								url = staticPath+`img/UnitRealtimeState/unit_all.png`;
       							}
       							$(".fire-sys-list ul").append(`<li class="accordion-item">
       								<a href="#" class="item-link item-content">
       								<div class="item-media">
       								<img src="`+url+`" style="width:40px;height:40px;">
       								</div>
       								<div class="item-inner">
       								<div class="row fireSystem-name">`+data[i].systemName+`</div>
       								<div class="row fireSystem-num">	
       								<div class="fireSystem-num-cont">
       								<i class="f7-icons my-icon" style="color: #fc4962;">circle</i>	
       								<span class="fireSystem-list-police-name">报警</span><span>`+data[i].fireNum+`</span>
       								</div>
       								<div class="fireSystem-num-cont">
       								<i class="f7-icons my-icon" style="color: #ffcd65;">circle</i>	
       								<span class="fireSystem-list-police-name">故障</span><span>`+data[i].faultNum+`</span>
       								</div>
       								<div class="fireSystem-num-cont">
       								<i class="f7-icons my-icon" style="color: #c8c6c7;">circle</i>	
       								<span class="fireSystem-list-police-name">屏蔽</span><span>`+data[i].shieldNum+`</span>
       								</div>
       								<div class="fireSystem-num-cont">
       								<i class="f7-icons my-icon" style="color: #37ef7d;">circle</i>	
       								<span class="fireSystem-list-police-name">正常</span><span>`+data[i].normalNum+`</span>
       								</div>
       								</div>
       								</div>
       								</a>
       								<div class="accordion-item-content">
       								<div class="block fire-system-nodeList">
       								</div>
       								</div>
       								</li>`);
       							if(data[i].fireCtlFacsCategoryStatuCountDtos && data[i].fireCtlFacsCategoryStatuCountDtos.length>0){
       								var fireNodeList = data[i].fireCtlFacsCategoryStatuCountDtos;
	       							var fireSysNodeList=$(".fire-system-nodeList").eq(i);
	       							fireSysNodeList.html("");
	       							// $(".fireSystem-nodeList").empty();
	       							for(var j=0; j<fireNodeList.length;j++){
	       								fireSysNodeList.append(`<div class="row fireSystem-list-row" id="fire_list_`+fireNodeList[j].fcfCategoryId+`">
	       									<div class="col-33">`+fireNodeList[j].fcfCategoryName+`</div>
	       									<div class="col-66">
	       									<div >报警`+fireNodeList[j].alertNum+`</div>
	       									<div>故障`+fireNodeList[j].faultNum+`</div>
	       									<div><a href="#" data-view=".view-main" style="color: #666666;">屏蔽`+fireNodeList[j].shieldingNum+`</a>
	       									</div>
	       									</div>
	       								</div>`);
	       							}
	       						}
	       					}
	       					$(".fire-sys-list li").eq(0).addClass('accordion-item-opened');
	       					if (screen.width <= 375) {
		                        $(".fireSystem-list-police-name").hide();
		                    }
	       				}
	       			}
	       			common.loading(0);
	       		});
			}
		}
 }
</script>